<template>
    <div class="home-container">
        <div class="home-content">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
                <el-form-item label="网络ID">
                    <el-input v-model="formInline.id" placeholder="网络ID"></el-input>
                </el-form-item>
                <el-form-item label="网络名称">
                    <el-input v-model="formInline.name" placeholder="网络名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="selectTable">查询</el-button>
                    <el-button type="primary" @click="resetForm('formInline')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-tabs type="border-card">
            <el-tab-pane label="创建的网络">
                <el-table :data="selectData" style="width: 100%" height="250">
                    <el-table-column fixed prop="id" label="网络ID" width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="网络名称" width="120">
                    </el-table-column>
                    <el-table-column prop="channels" label="通道数" width="120">
                    </el-table-column>
                    <el-table-column prop="organizations" label="组织数" width="120">
                    </el-table-column>
                    <el-table-column prop="order" label="order节点数" width="120">
                    </el-table-column>
                    <el-table-column prop="peer" label="peer节点数" width="120">
                    </el-table-column>
                    <el-table-column prop="Numbers" label="智能合约数" width="120">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="120">
                    </el-table-column>
                    <el-table-column prop="date" label="创建时间" width="120">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="primary"
                                size="small" plain  icon="el-icon-s-help">
                                管理
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="加入的网络">
                <el-table :data="selectData" style="width: 100%" height="250">
                    <el-table-column fixed prop="id" label="网络ID" width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="网络名称" width="120">
                    </el-table-column>
                    <el-table-column prop="channels" label="通道数" width="120">
                    </el-table-column>
                    <el-table-column prop="organizations" label="组织数" width="120">
                    </el-table-column>
                    <el-table-column prop="order" label="order节点数" width="120">
                    </el-table-column>
                    <el-table-column prop="peer" label="peer节点数" width="120">
                    </el-table-column>
                    <el-table-column prop="Numbers" label="智能合约数" width="120">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="120">
                    </el-table-column>
                    <el-table-column prop="date" label="创建时间" width="120">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="primary" plain
                                size="small" icon="el-icon-s-help">
                                管理
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
const tableData = [{
    id: '90437299819030',
    name: 'asi',
    channels: 4,
    organizations: 2,
    order: '3',
    peer: 1,
    Numbers: 1,
    status: '运行中',
    date: '2022-07-03',
}, {
    id: '13747299819030',
    name: 'asi',
    channels: 4,
    organizations: 2,
    order: '3',
    peer: 1,
    Numbers: 1,
    status: '运行中',
    date: '2022-07-03',
}, {
    id: '11237299819030',
    name: 'asi',
    channels: 4,
    organizations: 2,
    order: '3',
    peer: 1,
    Numbers: 1,
    status: '运行中',
    date: '2022-07-03',
}, {
    id: '46737299819030',
    name: 'asi',
    channels: 4,
    organizations: 2,
    order: '3',
    peer: 1,
    Numbers: 1,
    status: '运行中',
    date: '2022-07-03',
}, {
    id: '35537299819030',
    name: 'asi',
    channels: 4,
    organizations: 2,
    order: '3',
    peer: 1,
    Numbers: 1,
    status: '运行中',
    date: '2022-07-03',
}, {
    id: '14537297019030',
    name: 'asi',
    channels: 4,
    organizations: 2,
    order: '3',
    peer: 1,
    Numbers: 1,
    status: '运行中',
    date: '2022-07-03',
}, {
    id: '14537292119030',
    name: 'asi',
    channels: 4,
    organizations: 2,
    order: '3',
    peer: 1,
    Numbers: 1,
    status: '运行中',
    date: '2022-07-03',
}]
export default {
    name: 'home',
    data() {
        return {
            formInline: {
                name: '',
                id: '',
            },
            selectData: [],
        }
    },
    created() {
        this.selectTable()
    },
    unmounted() {
    },
    methods: {
        selectTable() {
            if (this.formInline.id || this.formInline.name) {
                const copyed = JSON.parse(JSON.stringify(tableData))
                this.selectData = copyed.filter(data => data.id == this.formInline.id || data.name == this.formInline.name)
            } else {
                this.selectData = tableData
            }
        },
        resetForm() {
            this.formInline.id = ''
            this.formInline.name = ''
            this.selectTable()
            // this.$nextTick(() => {
            //     this.$refs.formInline.resetFields()
            // })
        },
    },
}
</script>

<style scoped>
.home-container {
    padding: 10px;
    padding-top: 5px;
}

.home-content {
    display: flex;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
    position: relative;


}
</style>
<style>
.home-container .el-upload-list {
    position: absolute;
    right: 20px;
    top: 0;
}

.home-container .el-message-box .el-message-box__content {
    line-height: 60px;
    text-align: center;
}
</style>